<template>
  <div class="layout-main-container">
    <div :class="{ 'show-border-bottom': false }" v-show="PROP.options.length">
      <el-tabs class="menu" :value="PROP.defaultactive" @tab-click="MenuSelect">
        <el-tab-pane  v-for="(item, index) in PROP.options" v-if="item.show" :key="index" :name="item.path">
          <template slot="label">
            <span style="font-size: 16px;"> {{ item.title }}</span>
            <span v-if="item.iconbtns && IconBtnShow" style="margin-left: 10px; cursor: pointer">
              <i v-if="item.iconbtns.indexOf('edit')" @click="MenuIconClick(item, 'edit')" class="el-icon-edit-outline"></i>
              <i v-if="item.iconbtns.indexOf('delete')" @click="MenuIconClick(item, 'delete')" style="margin-left: 5px" class="el-icon-delete"></i>
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>

      <!-- <el-menu class="menu" :default-active="PROP.defaultactive" mode="horizontal" v-if="PROP" @select="MenuSelect">
        <template v-for="(item, index) of PROP.options">
          <template v-if="item.show">
            <el-menu-item style="cursor: default" :index="item.path" :key="index">
              <span style="margin-right: 10px; cursor: pointer"> {{ item.title }}</span>
              <span v-if="item.iconbtns">
                <i v-if="item.iconbtns.indexOf('edit')" @click="MenuIconClick(item, 'edit')" class="el-icon-edit-outline"></i>
                <i v-if="item.iconbtns.indexOf('delete')" @click="MenuIconClick(item, 'delete')" class="el-icon-delete"></i>
              </span>
            </el-menu-item>
          </template>
        </template>
      </el-menu> -->

      <div class="menu-right-box">
        <div class="button-box">
          <template v-if="current && current.rightButtons.length">
            <template v-for="(item, index) of current.rightButtons">
              <el-button
                :key="index"
                :disabled="item.disabled"
                :icon="item.icon"
                :type="item.type"
                size="mini"
                round
                @click="onClickRightButton(item.methodName)"
              >
                {{ item.name }}
              </el-button>
            </template>
          </template>
          <template v-else-if="PROP.rightButtons">
            <template v-for="(item, index) of PROP.rightButtons">
              <el-button
                :key="index"
                :disabled="item.disabled"
                :icon="item.icon"
                :type="item.type"
                size="mini"
                round
                @click="onClickRightButton(item.methodName)"
              >
                {{ item.name }}
              </el-button>
            </template>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},

  data() {
    return {
      m_IconClickIn: false,
      m_SelMenu: null, //当前选中的menu
    };
  },
  props: {
    IconBtnShow:{
       type: Boolean,
      default: true
    },
    PROP: {
      type: Object,
      default: {
        defaultactive: undefined,
        options: [],
      },
      //咧：{
      //   father: this,  //父组件实例
      //   defaultactive: 'Information',//默认选中的tab.path
      //   rightButtons: [
      //     {
      //       name: '新增1',
      //       methodName: 'Add',
      //       type: 'primary',
      //     },
      //   ],
      //   options: [
      //     {
      //       title: '基本信息',
      //       show: true,
      //       path: 'Information',
      //       rightButtons: [
      //         {
      //           name: '新增',
      //           methodName: 'Add',
      //           type: 'primary',
      //         },
      //       ],
      //       iconbtns: ['eidt', 'delete'],//tab可展示的icon
      //     },
      //   ],
      // },
    },

  },
  computed: {
    current() {
      let obj = this.PROP.options.find(item => {
        return item.path == this.m_SelMenu;
      });
      if (obj && obj.rightButtons) return obj;
      return null;
    },
  },
  created() {},
  mounted() {
    this.m_SelMenu = this.PROP.defaultactive;
  },
  methods: {
    SetBtnDisabledByName(name, val) {
      let btn = this.PROP.rightButtons.find(res => {
        return res.methodName == name;
      });
      if (btn) this.$set(btn, 'disabled', val);
    },
    MenuIconClick(item, type) {
      this.m_IconClickIn = true;
      setTimeout(() => {
        this.m_IconClickIn = false;
        this.PROP.defaultactive = null;
        this.$nextTick(() => {
          this.PROP.defaultactive = this.m_SelMenu;
        });
      }, 50);
      this.$emit("MenuIconClick",{ item: item, type: type })
      // this.$parent['MenuIconClick']({ item: item, type: type });
    },
    onClickRightButton(methodName) {
      this.$parent[methodName]();
    },
    MenuSelect(Path) {
      Path = Path.name;
      // 
      if (this.m_IconClickIn) return;
      this.m_SelMenu = Path;
       this.$emit("MenuSelect",Path)
      // this.$parent['MenuSelect'](Path);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__header {
  margin: 0;
}
.layout-main-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.menu-box {
  position: sticky;

  z-index: 100;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 30px;
  // margin-top: 15px;
  background: #fff;

  .menu {
    flex: 1;
    border-bottom: unset !important;
    height: 44px;
    box-sizing: border-box;
    // box-shadow: 10px 0 0 #ffffff, -10px 0 0 #ffffff, 0 2px 5px #00000020;
    overflow: hidden;
    .el-menu-item {
      border-bottom: unset !important;
      position: relative;
      height: 44px;
      line-height: 44px;
      color: $color-999999;

      &:hover,
      &:focus {
        color: $primary-color;
      }
    }

    .is-active {
      position: relative;
      color: $primary-color;
      &:before {
        position: absolute;
        content: '';
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 20px;
        height: 4px;
        background: $primary-color;
        border-radius: 2px;
      }
    }
  }

  .menu-right-box {
    display: flex;
    align-items: center;
    height: 44px;
    .button-box {
      .el-button {
        margin-left: 10px;
      }

      .is-round {
        padding: 10px 16px;
        border-radius: 17px;
        min-width: 80px;
      }
    }
  }
}

.show-border-bottom {
  border-bottom: 1px solid #e5e5e5;
}
.main {
  position: relative;
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  overflow-y: auto;
}
</style>